<template name="imgsBanner">
  <view class="imgsBannerBox">
    <swiper class="imgsBanner_swiper" :current="comCurrentImg" @change="changCurrent">
      <swiper-item v-for="(item, index) in imgList" :key="index">
        <img :src="item.photoUrl" mode="scaleToFill" :usemap="'#map'+item.id"></img>
        <c-map :name="'map'+item.id" :id="'map'+item.id">
          <area
          v-for="(prod, i) in productList"
          v-if="item.id == prod.goodsPhotoId"
          :key="i"
          shape="poly"
          :title="prod.photoDirect"
          :coords="prod.photoCoordinate"
          @click="clickArea(prod.productSn)" />
        </c-map>
      </swiper-item>
    </swiper>
    <!-- 图片位置 -->
    <view class="imgLength">{{ comCurrentImg + 1 + '/' + imgList.length }}</view>
    <scroll-view scroll-x="true" class="scrollImgBox" :scroll-left="scrollImgList" scroll-with-animation>
      <view class="scrollImgList">
        <image
          :src="item.photoUrl"
          mode="scaleToFill"
          v-for="(item, index) in imgList"
          :key="index"
          :class="comCurrentImg == index ? 'activeImageItem' : ''"
          @click="onClickImg(index)"
          :id="'item' + index"
        ></image>
      </view>
    </scroll-view>
    
    <view class="previewImg" v-if="showBox" @touchmove.stop.prevent>
      <view class="mask" @click="close">
        <swiper @change="changeSwiper" class="mask-swiper" :current="comCurrentImg" circular>
          <swiper-item v-for="(src, i) in imgList" :key="i">
            <image class="mask-swiper-img" :src="src.photoUrl" mode="aspectFit" />
          </swiper-item>
        </swiper>
      </view>
      <view class="pagebox" v-if="imgList.length>0">{{ Number(comCurrentImg) + 1 }} / {{ imgList.length }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'imgsBanner',
  props: {
    imgList: {
      type: Array,
      value: []
    },
    productList: {
      type: Array,
      value: []
    },
    currentImg: {
      type: Number,
      value: 0
    }
  },
  data() {
    return {
      showBox: false,
      comCurrentImg: 0,
      scrollImgList: 0,
      imgLeftList: []
    }
  },
  components: {
    'c-map': {
      render: function(createElement) {
        return createElement('map', this.$slots.default)
      }
    }
  },
  created() {
    this.comCurrentImg = this.currentImg
  },
  mounted() {
    uni.getSystemInfo({
      success: res => {
        this.imgList.forEach((i, v) => {
          let info = uni.createSelectorQuery().in(this)
          info.select('#item' + v).boundingClientRect(res => {
            this.imgLeftList.push(res.left)
          }).exec()
          info.select('.imgsBanner_swiper').boundingClientRect(result => {
            // 获取元素宽高设置新的坐标
            let res = {
              height: result.height,
              width: result.width
            }
            this._resHW = res
          }).exec()
        })
        this.imgListScroll(this.comCurrentImg)
        this._wdwidth = res.windowWidth
        this._wdheight = res.windowHeight
      }
    })
    // 页面的宽高 this._resHW
    let pageWidth =  this._resHW.width / 100
    let pageHeight =  this._resHW.height / 100
    // let imageWidth =  this._wdwidth
    let imageWidth =  500
    // let imageHeigth =  this._wdheight
    let imageHeigth =  480
    this.productList.map(item => {
      let itemChild = item.photoCoordinate.split(",")
      let itemChildPercent = new Array(itemChild.length)
      for(let i=0; i < itemChildPercent.length; ++i){
        // itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageWidth) / parseInt(imageWidth)).toString()
        // itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageHeight) / parseInt(imageHeigth)).toString()
        if (i % 2 === 0) {
          itemChildPercent[i] = parseInt(((itemChild[i] / imageWidth) * 100) * pageWidth)
        } else {
          itemChildPercent[i] = parseInt(((itemChild[i] / imageHeigth) * 100) * pageHeight)
        }
      }
      item.photoCoordinate = itemChildPercent.toString()
    })
  },
  methods: {
    clickArea(productSn) {
      this.$emit('clickPrd', productSn)
    },
    onClickImg(index) {
      this.comCurrentImg = index
      this.imgListScroll(index)
      this.showBox = true
    },
    changCurrent(e) {
      this.comCurrentImg = e.target.current
      this.imgListScroll(e.target.current)
    },
    // 图片滑动
    imgListScroll(index) {
      if (index >= 2) {
        this.scrollImgList = this.imgLeftList[index - 2]
      } else {
        this.scrollImgList = 0
      }
    },
    // 大图左右切换
    changeSwiper(e) {
      this.comCurrentImg = e.target.current;
    },
    close() {
      this.showBox = false
    }
  }
}
</script>

<style lang="scss" scoped>
.imgsBannerBox {
  position: relative;
}
.imgLength {
  position: absolute;
  top: 450rpx;
  right: 24rpx;
  background: rgba(0, 0, 0, 0.34);
  padding: 0 12rpx;
  line-height: 32rpx;
  font-size: 22rpx;
  border-radius: 16rpx;
  color: #fff;
}
.imgsBanner_swiper {
  width: 100%;
  height: 500rpx;
  margin-bottom: 16rpx;
  swiper-item {
    width: 100%;
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.scrollImgBox {
  .scrollImgList {
    white-space: nowrap;
    image {
      width: 100rpx;
      height: 100rpx;
      margin-right: 10rpx;
      display: inline-block;
      border: 6rpx solid #fff;
    }
    image:last-child {
      margin-right: 0;
    }
    .activeImageItem {
      border: 6rpx solid $uni-color-base;
    }
  }
}
@mixin full {
	width: 100%;
	height: 100%;
}

.previewImg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	@include full;
	.mask {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
		z-index: 5;
		@include full;
		&-swiper {
			@include full;
			&-img {
				@include full;
			}
		}
	}
	.pagebox{
		position: absolute;
		width: 100%;
		bottom: 20rpx;
		z-index: 6;
		color: #fff;
		text-align: center;
	}
}
</style>
